<template>
  <custom-container>
    <custom-container-header no-spacing>
      <el-form :model="filters" ref="form" :disabled="loading"
               inline size="medium"
               @submit.native.prevent="getAll"
      >
        <el-form-item label="查询时间:">
          <el-date-picker
            v-model="filters.date"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="{disabledDate: beforeToday.disabledDate}"
            value-format="timestamp"
            :default-time="['00:00:00', '23:59:59']"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="投注单号:">
          <el-input v-model="filters.tradeNo" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="会员账户名:">
          <el-input v-model="filters.username" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" native-type="submit">查询</el-button>
        </el-form-item>
        <el-form-item v-show="true">
          <custom-button-group v-model="time">
            <custom-button v-for="period in periods" :key="period.value" :label="period.value">
              {{period.title}}
            </custom-button>
          </custom-button-group>
        </el-form-item>
      </el-form>
    </custom-container-header>
    <custom-container-body>
        <el-table :data="tableData.list" :loading="loading" element-loading-text="加载中..." border border-radius>
        <el-table-column
          align="center"
          prop="createTime"
          label="投注时间">
          <template slot-scope="{row}">
            {{row.createTime | toTime}}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="orderId"
          label="投注单号">
        </el-table-column>
        <el-table-column
          align="center"
          prop="gameName"
          label="游戏类型">
        </el-table-column>
        <!--<el-table-column-->
          <!--align="center"-->
          <!--label="投注内容">-->
          <!--<template slot-scope="{row}">-->
            <!--<span v-html="formatBetDetails(row)"></span>-->
          <!--</template>-->
        <!--</el-table-column>-->
        <el-table-column
          align="center"
          label="下注金额">
          <template slot-scope="{row}">
            <span v-if="row.betWays === 0">{{row.amount | currency}}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="派奖金额">
          <template slot-scope="{row}">
            <span v-if="row.betWays === 0">{{row.prize | currency}}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="有效投注">
          <template slot-scope="{row}">
            <span>{{row.effectiveAmount | currency}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="公司输赢">
          <template slot-scope="{row}">
            <money-text  :negate="true" :value="row.totalWin"></money-text>
          </template>
        </el-table-column>
  
  
          <template slot="empty">
          <div class="el-table__empty">
            <svg-icon class="el-table__empty-icon" icon-class="grid-empty-2"></svg-icon>
            <div class="el-table-text">暂无数据</div>
          </div>
        </template>
      </el-table>
      <div class="el-pagination-container">
        <el-pagination
          bordered
          @size-change="gridSizeChange" @current-change="gridCurrentChange"
          :current-page="filters.page" :page-size="filters.size"
          :total="tableData.total">
        </el-pagination>
      </div>
    </custom-container-body>
  </custom-container>
</template>

<script type="text/jsx">

  import {bettingDetailApi as getApi} from '@/services/api/report';
  
  import { grid, pickerOption} from '@/build';
  // import commonMixins from './common';

  import CONST from './CONST';
  import { formatChessBetDetail } from './chessBetDetailConfig';

  export default {

    name: "sub-member-game-bet-detail",

    mixins: [grid, pickerOption],
    
    props:{
      betInfo: {
        required:true,
      }
    },

    data() {
      return {
        filters: {
          tradeNo:undefined,
          username: this.$route.params.username,
          date:undefined,
          gamePlatformId: this.betInfo.gamePlatformId,
          betWays: this.betInfo.betWays,
          page: 1,
          size: 20,
        },
        tableData: {
          list: [],
          total: 0,
        },
        time:consts.THIS_WEEK,
        periods: _.filter(consts.TIME_PERIOD, (period) => {
          return _.indexOf([consts.THIS_WEEK, consts.LAST_WEEK, consts.THIS_MONTH, consts.LAST_MONTH], period.value) !== -1;
        }),
      };
    },
    
    methods:{
      formatBetDetails(betInfo) {
        let { betDetails } = betInfo;
        const mold = betInfo.gamePlatformId % 1000;
        if (mold == 2) {
          // 体育投注详情
          _.each(betInfo.bets, (item) => {
            betInfo.betDetails += `联赛：${item.event.tag}双方：${item.event.name}${CONST.sportSelectionNameMap(item.selection)} - ${CONST.sportPeriodNameMap(item.period)} - ${CONST.sportBetTypeMap(item.betType)}，`;
          });
          betDetails = `${betInfo.betDetails}等${betInfo.bets.length}项，共计${_.currency(betInfo.amount)}元`;
        } else if (mold == 6) {
          // 棋牌投注详情
          betDetails = formatChessBetDetail(betInfo.gameName, betInfo.bets);
        } else {
          betDetails = betInfo.betDetails;
        }
        return betDetails;
      },
    },

    mounted() {
      this.bindGet(getApi, 'tableData', {
        action: 'getGrid',
        sendingData: 'filters',
      });
      // this.getAll();
    }
  };

</script>

